<!--
 * @Descripttion:
 * @version:
 * @Author: cdy
 * @Date: 2025-06-30 10:13:46
 * @LastEditors: cdy
 * @LastEditTime: 2025-08-18 09:38:37
-->
<template>
  <div class="pageOut">
    <div class="pageContain" style="overflow: hidden; width: calc(100% - 2vw)">
      <div class="topFenallContain" style="margin-top: 2.5vh">
        <div class="topFen divBeteewn">
          <div class="useElect divFlexStart">
            <div class="useAll" style="background: #0059b2">能源类型</div>
            <el-select
              v-model="nenegyType"
              style="width: 5vw; margin-left: 0.5vw"
              @change="getGroup()"
            >
              <el-option label="电" :value="1"></el-option>
              <el-option label="燃气" :value="2"></el-option>
            </el-select>
            <div class="useAll" style="background: #0059b2; margin-left: 0.5vw">
              分组
            </div>
            <el-select
              v-model="chanxian"
              style="width: 7vw; margin-left: 0.5vw"
              @change="changeGroup()"
            >
              <el-option
                v-for="item in deviceList"
                :lable="item.name"
                :value="item.name"
              ></el-option>
            </el-select>

            <el-select
              v-model="selectLong"
              style="width: 5vw; margin-left: 0.5vw"
              placeholder="年月日"
              @change="changeSelect()"
            >
              <el-option lable="日" value="日"></el-option>
              <el-option lable="月" value="月"></el-option>
              <el-option lable="年" value="年"></el-option>
            </el-select>
            <div class="useAll" style="background: #0059b2; margin-left: 0.5vw">
              开始时间
            </div>
            <el-config-provider :locale="locale">
              <el-date-picker
                v-model="issueDate"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 8vw; margin-left: 0.5vw"
                v-if="selectLong == '日'"
                @change="getLineNumber()"
              />
              <el-date-picker
                v-model="issueDate"
                type="month"
                placeholder="选择月份"
                format="YYYY-MM"
                value-format="YYYY-MM"
                style="width: 8vw; margin-left: 0.5vw"
                v-if="selectLong == '月'"
                @change="getLineNumber()"
              />
              <el-date-picker
                v-model="issueDate"
                type="year"
                placeholder="选择年"
                format="YYYY"
                value-format="YYYY"
                style="width: 8vw; margin-left: 0.5vw"
                v-if="selectLong == '年'"
                @change="getLineNumber()"
              />
            </el-config-provider>

            <el-checkbox
              v-if="selectLong !== '日'"
              v-model="checked"
              style="margin-left: 0.5vw; zoom: 1.8"
              @change="getLineNumber()"
            ></el-checkbox>
            <div class="deleteWeek" v-if="selectLong !== '日'">去除周末</div>
          </div>
        </div>
        <div class="chart1Contain divBeteewn" style="border: none">
          <div class="chart1"></div>
          <div class="chart2"></div>
        </div>
      </div>
      <div class="topFenallContain" style="margin-top: 2.5vh; overflow: hidden">
        <div class="tableContainner">
          <el-table
            style="margin-bottom: 10px"
            :data="dataList"
            :header-cell-style="{
              backgroundColor: '#0059B2',
              color: 'white',
              border: '1px solid black',
            }"
            :cell-style="{
              // backgroundColor: '#909399',
              border: '1px solid black',
            }"
          >
            <el-table-column label="电能类型" prop="name">
              <template #default="scope">
                <div>
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="单价(元/千瓦时)"
              prop="unitPrice"
            ></el-table-column>
            <el-table-column
              label="电量(千瓦时)"
              prop="number"
            ></el-table-column>
            <el-table-column label="电费总计" prop="count">
              <template #default="scope">
                <div>
                  {{ formatNumber(scope.row.number * scope.row.unitPrice) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sendMessage from "@/mitt/sendMessage.js";
import * as echarts from "echarts";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import service from "@/api/api";
import {
  getToday,
  completeMissingTimes,
  arrEachsingle,
  deilWith,
  sumArrayElements,
  formatNumber,
  getMonthDates,
  getMonthWithoutWeek,
  formatYearMonths,
} from "@/mitt/until";
import { userEnengy, allDay } from "@/mitt/userNenegy";
let chart1 = null;
let chart2 = null;
export default {
  beforeRouteEnter(to, from, next) {
    sendMessage(3, "复费率电费");
    next();
  },

  data() {
    return {
      selectLong: "日",
      nenegyType: 1,
      date1: "",
      checked: "",
      locale: zhCn,
      chanxian: "",
      issueDate: "",
      issueDate1: "",
      groupId: "",

      originNumber: [],
      deviceList: [],
      dataList: [],
      option: {
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "item",
          show: true,
          showContent: true,
          alwaysShowContent: false,
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["尖", "峰", "平", "谷", "深谷"],
          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "小时",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisTick: { show: false },
          type: "category",
          data: [],
        },
        yAxis: {
          name: "KW.h",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
        },

        series: [
          {
            name: "尖",
            data: [],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#42C181",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "峰",
            data: [],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#92D050",
            },
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "平",
            data: [],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#0070C0",
            },
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "谷",
            data: [],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#FFC000",
            },
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "深谷",
            data: [],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#FD8851",
            },
            label: {
              show: true,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
        ],
      },
      optionDay: {
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "axis", // 触发类型，可选 'item' | 'axis' | 'none'
          show: true, // 是否显示提示框
          showContent: true, // 是否显示提示框浮层
          alwaysShowContent: false, // 是否永远显示提示框内容
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["尖", "峰", "平", "谷", "深谷"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "日",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisTick: { show: false },
          type: "category",
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
          ],
        },
        yAxis: {
          name: "单位:KW.h",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
        },

        series: [
          {
            name: "尖",
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 26, 50, 80, 70, 0, 0, 0, 0,
              0, 0, 0, 0,
            ],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#42C181",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "峰",
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 33,
              25, 33, 45,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#92D050",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "平",
            data: [
              0, 0, 0, 0, 0, 0, 33, 43, 25, 44, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0, 0, 0, 0,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#0070C0",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "谷",
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 45, 50, 32, 0,
              0, 0, 0,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#FFC000",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "深谷",
            data: [
              34, 34, 33, 45, 44, 45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0, 0, 0, 0,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#FD8851",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
        ],
      },
      optionMonth: {
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "axis", // 触发类型，可选 'item' | 'axis' | 'none'
          show: true, // 是否显示提示框
          showContent: true, // 是否显示提示框浮层
          alwaysShowContent: false, // 是否永远显示提示框内容
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["尖", "峰", "平", "谷", "深谷"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "月",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisTick: { show: false },
          type: "category",
          data: [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
            20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
          ],
        },
        yAxis: {
          name: "单位:KW.h",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
        },

        series: [
          {
            name: "尖",
            data: [
              40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 70,
              60, 30, 40, 26, 50, 80, 50, 80, 26, 50, 80, 50, 80, 50,
            ],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#42C181",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "峰",
            data: [
              80, 70, 10, 50, 90, 40, 70, 80, 70, 10, 50, 90, 10, 50, 90, 40,
              70, 80, 70, 10, 50, 90, 40, 70, 50, 90, 40, 70, 80, 70,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#92D050",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "平",
            data: [
              40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 70,
              60, 30, 40, 26, 50, 80, 50, 80, 26, 50, 80, 40, 26, 50,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#0070C0",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "谷",
            data: [
              40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 70,
              60, 30, 40, 26, 50, 80, 50, 80, 70, 60, 30, 40, 26, 50,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#FFC000",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
          {
            name: "深谷",
            data: [
              40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 70,
              60, 30, 40, 26, 50, 80, 50, 80, 30, 40, 26, 50, 80, 50,
            ],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#FD8851",
            },
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
        ],
      },
      optionYear: {
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "axis", // 触发类型，可选 'item' | 'axis' | 'none'
          show: true, // 是否显示提示框
          showContent: true, // 是否显示提示框浮层
          alwaysShowContent: false, // 是否永远显示提示框内容
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["尖", "峰", "平", "谷", "深谷"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "年",
          nameTextStyle: {
            color: "black",
            fontSize: 12,
            fontWeight: 400,
          },
          axisLabel: {
            color: "black",
            fontSize: 12,
            fontWeight: 400,
          },
          axisTick: { show: false },
          type: "category",
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        },
        yAxis: {
          name: "单位:KW.h",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
        },

        series: [
          {
            name: "尖",
            data: [40, 26, 50, 80, 70, 60, 30, 40, 26, 50, 80, 40],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#42C181",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: false,
              color: "white",
            },
          },
          {
            name: "峰",
            data: [90, 40, 70, 80, 70, 10, 50, 90, 10, 50, 90, 40],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#92D050",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: false,
              color: "white",
            },
          },
          {
            name: "平",
            data: [60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 70, 60],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#0070C0",
            },
            label: {
              show: false,
              color: "white",
            },
          },
          {
            name: "谷",
            data: [60, 30, 40, 26, 50, 80, 40, 26, 50, 80, 50, 80],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#FFC000",
            },
            label: {
              show: false,
              color: "white",
            },
          },
          {
            name: "深谷",
            data: [50, 80, 70, 60, 30, 40, 26, 50, 80, 40, 26, 50],
            type: "bar",
            stack: "total",
            barWidth: "60%",
            barMaxWidth: 40,
            itemStyle: {
              color: "#FD8851",
            },
            label: {
              show: false,
              color: "white",
            },
          },
        ],
      },
      option1: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: ["尖", "峰", "平", "谷", "深谷"],
          itemWidth: 20, // 设置图例图形宽度
          itemHeight: 20, // 设置图例图形高度
          itemShape: "circle", // 设置图例图形为圆形
          icon: "circle",
          top: "0%",
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "68%",
            center: ["50%", "50%"],
            clockwise: false,
            data: [
              {
                value: 45,
                name: "尖",
              },
              {
                value: 25,
                name: "峰",
              },
              {
                value: 15,
                name: "平",
              },
              {
                value: 7,
                name: "谷",
              },
              {
                value: 12,
                name: "深谷",
              },
            ],
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#999",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              lable: {
                show: false,
              },

              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        color: ["#42C181", "#92D050", "#0070C0", "#FFC000", "#FD8851"],
        backgroundColor: "#fff",
      },
      option1Ele: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: ["尖", "峰", "平", "谷", "深谷"],
          itemWidth: 20, // 设置图例图形宽度
          itemHeight: 20, // 设置图例图形高度
          itemShape: "circle", // 设置图例图形为圆形
          icon: "circle",
          top: "0%",
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "68%",
            center: ["50%", "50%"],
            clockwise: false,
            data: [
              {
                value: 45,
                name: "尖",
              },
              {
                value: 25,
                name: "峰",
              },
              {
                value: 15,
                name: "平",
              },
              {
                value: 7,
                name: "谷",
              },
              {
                value: 12,
                name: "深谷",
              },
            ],
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#999",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              lable: {
                show: false,
              },

              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        color: ["#42C181", "#92D050", "#0070C0", "#FFC000", "#FD8851"],
        backgroundColor: "#fff",
      },
      option1Gas: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: ["燃气"],
          itemWidth: 20, // 设置图例图形宽度
          itemHeight: 20, // 设置图例图形高度
          itemShape: "circle", // 设置图例图形为圆形
          icon: "circle",
          top: "0%",
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "68%",
            center: ["50%", "50%"],
            clockwise: false,
            data: [],
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#999",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              lable: {
                show: false,
              },

              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        color: ["#42C181", "#92D050", "#0070C0", "#FFC000", "#FD8851"],
        backgroundColor: "#fff",
      },
      optionGASDay: {
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "axis", // 触发类型，可选 'item' | 'axis' | 'none'
          show: true, // 是否显示提示框
          showContent: true, // 是否显示提示框浮层
          alwaysShowContent: false, // 是否永远显示提示框内容
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["燃气"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "日",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisTick: { show: false },
          type: "category",
          data: [],
        },
        yAxis: {
          name: "单位:KW.h",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
        },

        series: [
          {
            name: "燃气",
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 26, 50, 80, 70, 0, 0, 0, 0,
              0, 0, 0, 0,
            ],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#42C181",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
        ],
      },
      optionGASMonth: {
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "axis", // 触发类型，可选 'item' | 'axis' | 'none'
          show: true, // 是否显示提示框
          showContent: true, // 是否显示提示框浮层
          alwaysShowContent: false, // 是否永远显示提示框内容
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["燃气"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "月",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisTick: { show: false },
          type: "category",
          data: [],
        },
        yAxis: {
          name: "单位:KW.h",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
        },

        series: [
          {
            name: "燃气",
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 26, 50, 80, 70, 0, 0, 0, 0,
              0, 0, 0, 0,
            ],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#42C181",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
        ],
      },
      optionGASYear: {
        grid: {
          left: "5%",
          right: "8%",
          top: "15%",
          bottom: "8%",
        },
        tooltip: {
          trigger: "axis", // 触发类型，可选 'item' | 'axis' | 'none'
          show: true, // 是否显示提示框
          showContent: true, // 是否显示提示框浮层
          alwaysShowContent: false, // 是否永远显示提示框内容
        },
        legend: {
          itemWidth: 40,
          // 单个图例项的图标高度
          itemHeight: 24,
          data: ["燃气"],

          left: "center",
          textStyle: {
            color: "black", // 设置为红色
            // 还可以设置其他文字样式
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          name: "年",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          axisTick: { show: false },
          type: "category",
          data: [],
        },
        yAxis: {
          name: "单位:KW.h",
          nameTextStyle: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
          type: "value",
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "black",
            fontSize: 14,
            fontWeight: 400,
          },
        },

        series: [
          {
            name: "燃气",
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 26, 50, 80, 70, 0, 0, 0, 0,
              0, 0, 0, 0,
            ],
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#42C181",
            },
            barWidth: "60%",
            barMaxWidth: 40,
            label: {
              show: false,
              color: "white",
              formatter: function (e) {
                if (e.data == 0) {
                  return "";
                } else {
                  return e.data;
                }
              },
            },
          },
        ],
      },
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    changeDateType() {
      this.issueDate = "";
    },

    formatNumber(num) {
      if (Number.isInteger(num)) {
        return num.toString(); // 整数直接返回字符串形式
      } else {
        return num.toFixed(2); // 小数保留 2 位
      }
    },
    async getLineNumber() {
      let timeType = null;
      if (this.selectLong == "日") {
        timeType = 1;
      } else if (this.selectLong == "月") {
        timeType = 3;
      } else if (this.selectLong == "年") {
        timeType = 4;
      }
      let data = {
        dataTime: this.issueDate,
        groupId: this.groupId,
        timeType: timeType,
        type: this.nenegyType,
      };
      if (this.checked) {
        data.weekFlag = this.checked;
      } else {
        data.weekFlag = false;
      }
      let res = await service({
        method: "get",
        url: "/electricity-bill/line-data",
        params: data,
      });

      if (!res.data) {
        return this.$message({
          message: "未获取到数据，图表不刷新",
          type: "warning",
        });
      }
      this.originNumber = res.data;
      let arrPeak = [];
      let arrHigh = [];
      let arrFlat = [];
      let arrValley = [];
      let arrDeepValley = [];
      let number1 = [];
      let number2 = [];
      let number3 = [];
      let number4 = [];
      let number5 = [];
      let time1 = [];
      let axisTime = [];
      if (this.nenegyType == 1) {
        if (timeType == 1) {
          if (this.issueDate == getToday()) {
            time1 = userEnengy();
          } else {
            time1 = allDay();
          }
          time1.forEach((item) => {
            axisTime.push(item[0]);
            console.log("axisTime", axisTime);
          });
          res.data.data.forEach((item) => {
            if (item.key == "ELE_VALLEY") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrValley.push([it.time, it.value]);
                });
                arrValley = completeMissingTimes(time1, arrValley);
                arrValley.forEach((item) => {
                  number4.push(item[1]);
                });
              } else {
                number4 = [];

                arrEachsingle(time1, number4);
              }
            } else if (item.key == "ELE_HIGH") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrHigh.push([it.time, it.value]);
                });
                arrHigh = completeMissingTimes(time1, arrHigh);
                arrHigh.forEach((item) => {
                  number2.push(item[1]);
                });
              } else {
                number2 = [];
                time1.forEach((item) => {
                  number2.push(item[1]);
                });
              }
            } else if (item.key == "ELE_FLAT") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrFlat.push([it.time, it.value]);
                });
                arrFlat = completeMissingTimes(time1, arrFlat);

                arrFlat.forEach((item) => {
                  number3.push(item[1]);
                });
              } else {
                number3 = [];
                time1.forEach((item) => {
                  number3.push(item[1]);
                });
              }
            } else if (item.key == "ELE_PEAK") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrPeak.push([it.time, it.value]);
                });
                arrPeak = completeMissingTimes(time1, arrPeak);

                arrPeak.forEach((item) => {
                  number1.push(item[1]);
                });
              } else {
                number1 = [];
                time1.forEach((item) => {
                  number1.push(item[1]);
                });
              }
            } else if (item.key == "ELE_DEEP_VALLEY") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrPeak.push([it.time, it.value]);
                });
                arrDeepValley = completeMissingTimes(time1, arrDeepValley);
                arrDeepValley.forEach((item) => {
                  number5.push(item[1]);
                });
              } else {
                number5 = [];

                time1.forEach((item) => {
                  number5.push(item[1]);
                });
              }
            }
          });
          let listArr = [];
          let rule = res.data.rule;
          let pieArr = [
            { name: "尖", value: sumArrayElements(number1) },
            { name: "峰", value: sumArrayElements(number2) },
            { name: "平", value: sumArrayElements(number3) },
            { name: "谷", value: sumArrayElements(number4) },
            { name: "深谷", value: sumArrayElements(number5) },
          ];

          rule.forEach((item) => {
            if (item.keyStr == "ELE_PEAK") {
              listArr.push({
                name: "尖",
                unitPrice: item.unitPrice,
                number: pieArr[0].value,
              });
            } else if (item.keyStr == "ELE_HIGH") {
              listArr.push({
                name: "峰",
                unitPrice: item.unitPrice,
                number: pieArr[1].value,
              });
            } else if (item.keyStr == "ELE_FLAT") {
              listArr.push({
                name: "平",
                unitPrice: item.unitPrice,
                number: pieArr[2].value,
              });
            } else if (item.keyStr == "ELE_VALLEY") {
              listArr.push({
                name: "谷",
                unitPrice: item.unitPrice,
                number: pieArr[3].value,
              });
            } else if (item.keyStr == "ELE_DEEP_VALLEY") {
              listArr.push({
                name: "深谷",
                unitPrice: item.unitPrice,
                number: pieArr[4].value,
              });
            }
          });
          this.dataList = listArr;
          this.option = this.optionYear;
          this.option1 = this.option1Ele;
          this.option.xAxis.data = axisTime;
          this.option.series[0].data = number1;
          this.option.series[1].data = number2;
          this.option.series[2].data = number3;
          this.option.series[3].data = number4;
          this.option.series[4].data = number5;
          chart1.setOption(this.option, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });

          this.option1.series[0].data = pieArr;
          chart2.setOption(this.option1, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
        } else if (timeType == 3) {
          if (this.checked == false) {
            time1 = getMonthDates(this.issueDate);
          } else {
            time1 = getMonthWithoutWeek(this.issueDate);
          }

          time1.forEach((item) => {
            axisTime.push(item[0]);
            console.log("axisTime", axisTime);
          });
          res.data.data.forEach((item) => {
            if (item.key == "ELE_VALLEY") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrValley.push([it.time, it.value]);
                });
                arrValley = completeMissingTimes(time1, arrValley);
                arrValley.forEach((item) => {
                  number4.push(item[1]);
                });
              } else {
                number4 = [];

                arrEachsingle(time1, number4);
              }
            } else if (item.key == "ELE_HIGH") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrHigh.push([it.time, it.value]);
                });
                arrHigh = completeMissingTimes(time1, arrHigh);
                arrHigh.forEach((item) => {
                  number2.push(item[1]);
                });
              } else {
                number2 = [];
                time1.forEach((item) => {
                  number2.push(item[1]);
                });
              }
            } else if (item.key == "ELE_FLAT") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrFlat.push([it.time, it.value]);
                });
                arrFlat = completeMissingTimes(time1, arrFlat);

                arrFlat.forEach((item) => {
                  number3.push(item[1]);
                });
              } else {
                number3 = [];
                time1.forEach((item) => {
                  number3.push(item[1]);
                });
              }
            } else if (item.key == "ELE_PEAK") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrPeak.push([it.time, it.value]);
                });
                arrPeak = completeMissingTimes(time1, arrPeak);

                arrPeak.forEach((item) => {
                  number1.push(item[1]);
                });
              } else {
                number1 = [];
                time1.forEach((item) => {
                  number1.push(item[1]);
                });
              }
            } else if (item.key == "ELE_DEEP_VALLEY") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrPeak.push([it.time, it.value]);
                });
                arrDeepValley = completeMissingTimes(time1, arrDeepValley);
                arrDeepValley.forEach((item) => {
                  number5.push(item[1]);
                });
              } else {
                number5 = [];

                time1.forEach((item) => {
                  number5.push(item[1]);
                });
              }
            }
          });
          let listArr = [];
          let rule = res.data.rule;
          let pieArr = [
            { name: "尖", value: sumArrayElements(number1) },
            { name: "峰", value: sumArrayElements(number2) },
            { name: "平", value: sumArrayElements(number3) },
            { name: "谷", value: sumArrayElements(number4) },
            { name: "深谷", value: sumArrayElements(number5) },
          ];

          rule.forEach((item) => {
            if (item.keyStr == "ELE_PEAK") {
              listArr.push({
                name: "尖",
                unitPrice: item.unitPrice,
                number: pieArr[0].value,
              });
            } else if (item.keyStr == "ELE_HIGH") {
              listArr.push({
                name: "峰",
                unitPrice: item.unitPrice,
                number: pieArr[1].value,
              });
            } else if (item.keyStr == "ELE_FLAT") {
              listArr.push({
                name: "平",
                unitPrice: item.unitPrice,
                number: pieArr[2].value,
              });
            } else if (item.keyStr == "ELE_VALLEY") {
              listArr.push({
                name: "谷",
                unitPrice: item.unitPrice,
                number: pieArr[3].value,
              });
            } else if (item.keyStr == "ELE_DEEP_VALLEY") {
              listArr.push({
                name: "深谷",
                unitPrice: item.unitPrice,
                number: pieArr[4].value,
              });
            }
          });

          this.dataList = listArr;
          this.option = this.optionMonth;
          this.option1 = this.option1Ele;
          this.option.xAxis.data = axisTime;
          this.option.series[0].data = number1;
          this.option.series[1].data = number2;
          this.option.series[2].data = number3;
          this.option.series[3].data = number4;
          this.option.series[4].data = number5;
          chart1.setOption(this.option, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });

          this.option1.series[0].data = pieArr;
          chart2.setOption(this.option1, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
        } else if (timeType == 4) {
          time1 = formatYearMonths(this.issueDate);

          time1.forEach((item) => {
            axisTime.push(item[0]);
            console.log("axisTime", axisTime);
          });
          res.data.data.forEach((item) => {
            if (item.key == "ELE_VALLEY") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrValley.push([it.time, it.value]);
                });
                arrValley = completeMissingTimes(time1, arrValley);
                arrValley.forEach((item) => {
                  number4.push(item[1]);
                });
              } else {
                number4 = [];

                arrEachsingle(time1, number4);
              }
            } else if (item.key == "ELE_HIGH") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrHigh.push([it.time, it.value]);
                });
                arrHigh = completeMissingTimes(time1, arrHigh);
                arrHigh.forEach((item) => {
                  number2.push(item[1]);
                });
              } else {
                number2 = [];
                time1.forEach((item) => {
                  number2.push(item[1]);
                });
              }
            } else if (item.key == "ELE_FLAT") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrFlat.push([it.time, it.value]);
                });
                arrFlat = completeMissingTimes(time1, arrFlat);

                arrFlat.forEach((item) => {
                  number3.push(item[1]);
                });
              } else {
                number3 = [];
                time1.forEach((item) => {
                  number3.push(item[1]);
                });
              }
            } else if (item.key == "ELE_PEAK") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrPeak.push([it.time, it.value]);
                });
                arrPeak = completeMissingTimes(time1, arrPeak);

                arrPeak.forEach((item) => {
                  number1.push(item[1]);
                });
              } else {
                number1 = [];
                time1.forEach((item) => {
                  number1.push(item[1]);
                });
              }
            } else if (item.key == "ELE_DEEP_VALLEY") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrPeak.push([it.time, it.value]);
                });
                arrDeepValley = completeMissingTimes(time1, arrDeepValley);
                arrDeepValley.forEach((item) => {
                  number5.push(item[1]);
                });
              } else {
                number5 = [];

                time1.forEach((item) => {
                  number5.push(item[1]);
                });
              }
            }
          });
          let listArr = [];
          let rule = res.data.rule;
          let pieArr = [
            { name: "尖", value: sumArrayElements(number1) },
            { name: "峰", value: sumArrayElements(number2) },
            { name: "平", value: sumArrayElements(number3) },
            { name: "谷", value: sumArrayElements(number4) },
            { name: "深谷", value: sumArrayElements(number5) },
          ];

          rule.forEach((item) => {
            if (item.keyStr == "ELE_PEAK") {
              listArr.push({
                name: "尖",
                unitPrice: item.unitPrice,
                number: pieArr[0].value,
              });
            } else if (item.keyStr == "ELE_HIGH") {
              listArr.push({
                name: "峰",
                unitPrice: item.unitPrice,
                number: pieArr[1].value,
              });
            } else if (item.keyStr == "ELE_FLAT") {
              listArr.push({
                name: "平",
                unitPrice: item.unitPrice,
                number: pieArr[2].value,
              });
            } else if (item.keyStr == "ELE_VALLEY") {
              listArr.push({
                name: "谷",
                unitPrice: item.unitPrice,
                number: pieArr[3].value,
              });
            } else if (item.keyStr == "ELE_DEEP_VALLEY") {
              listArr.push({
                name: "深谷",
                unitPrice: item.unitPrice,
                number: pieArr[4].value,
              });
            }
          });

          this.dataList = listArr;
          this.option = this.optionYear;
          this.option1 = this.option1Ele;
          this.option.xAxis.data = axisTime;
          this.option.series[0].data = number1;
          this.option.series[1].data = number2;
          this.option.series[2].data = number3;
          this.option.series[3].data = number4;
          this.option.series[4].data = number5;
          chart1.setOption(this.option, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });

          this.option1.series[0].data = pieArr;
          chart2.setOption(this.option1, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
        }
      } else if (this.nenegyType == 2) {
        if (timeType == 1) {
          if (this.issueDate == getToday()) {
            time1 = userEnengy();
          } else {
            time1 = allDay();
          }
          time1.forEach((item) => {
            axisTime.push(item[0]);
          });
          res.data.data.forEach((item) => {
            if (item.key == "GAS") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrValley.push([it.time, it.value]);
                });
                arrValley = completeMissingTimes(time1, arrValley);
                arrValley.forEach((item) => {
                  number4.push(item[1]);
                });
              } else {
                number4 = [];
                arrEachsingle(time1, number4);
              }
            }
          });
          let listArr = [];
          let rule = res.data.rule;
          let pieArr = [{ name: "燃气", value: sumArrayElements(number4) }];

          rule.forEach((item) => {
            if (item.keyStr == "GAS") {
              listArr.push({
                name: "燃气",
                unitPrice: item.unitPrice,
                number: pieArr[0].value,
              });
            }
          });
          this.dataList = listArr;
          this.option = this.optionGASDay;
          this.option.xAxis.data = axisTime;
          this.option.series[0].data = number4;
          chart1.setOption(this.option, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
          this.option1 = this.option1Gas;
          this.option1.series[0].data = pieArr;
          chart2.setOption(this.option1, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
        } else if (timeType == 3) {
          if (this.checked == false) {
            time1 = getMonthDates(this.issueDate);
          } else {
            time1 = getMonthWithoutWeek(this.issueDate);
          }

          time1.forEach((item) => {
            axisTime.push(item[0]);
            console.log("axisTime", axisTime);
          });
          res.data.data.forEach((item) => {
            if (item.key == "GAS") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrValley.push([it.time, it.value]);
                });
                arrValley = completeMissingTimes(time1, arrValley);
                arrValley.forEach((item) => {
                  number4.push(item[1]);
                });
              } else {
                number4 = [];
                arrEachsingle(time1, number4);
                console.log(number4);
              }
            }
          });
          let listArr = [];
          let rule = res.data.rule;
          let pieArr = [{ name: "燃气", value: sumArrayElements(number4) }];

          rule.forEach((item) => {
            if (item.keyStr == "GAS") {
              listArr.push({
                name: "燃气",
                unitPrice: item.unitPrice,
                number: pieArr[0].value,
              });
            }
          });

          this.dataList = listArr;
          this.option = this.optionGASMonth;
          this.option.xAxis.data = axisTime;
          this.option.series[0].data = number4;
        
          chart1.setOption(this.option, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
          this.option1 = this.option1Gas;
          this.option1.series[0].data = pieArr;
          chart2.setOption(this.option1, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
        } else if (timeType == 4) {
          time1 = formatYearMonths(this.issueDate);

          time1.forEach((item) => {
            axisTime.push(item[0]);
            console.log("axisTime", axisTime);
          });
          res.data.data.forEach((item) => {
            if (item.key == "GAS") {
              if (item.timeValueList && item.timeValueList.length > 0) {
                item.timeValueList.forEach((it) => {
                  arrValley.push([it.time, it.value]);
                });
                arrValley = completeMissingTimes(time1, arrValley);
                arrValley.forEach((item) => {
                  number4.push(item[1]);
                });
              } else {
                number4 = [];

                arrEachsingle(time1, number4);
              }
            }
          });
          let listArr = [];
          let rule = res.data.rule;
          let pieArr = [{ name: "燃气", value: sumArrayElements(number4) }];

          rule.forEach((item) => {
            if (item.keyStr == "GAS") {
              listArr.push({
                name: "燃气",
                unitPrice: item.unitPrice,
                number: pieArr[0].value,
              });
            }
          });

          this.dataList = listArr;
          this.option = this.optionGASYear;
          this.option.xAxis.data = axisTime;
          this.option.series[0].data = number4;
          console.log(this.option);
          this.option1 = this.option1Gas;
          chart1.setOption(this.option, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });

          this.option1.series[0].data = pieArr;
          chart2.setOption(this.option1, {
            notMerge: true, // 不合并旧配置
            lazyUpdate: true,
          });
        }
      }
    },
    changeGroup() {
      this.deviceList.forEach((item) => {
        if (item.name == this.chanxian) {
          this.groupId = item.id;
          this.getLineNumber();
        }
      });
    },
    async getGroup() {
      let data = {
        type: this.nenegyType,
      };
      let res = await service({
        method: "get",
        url: "/electricity-bill/group-list",
        params: data,
      });
      if (res.status == "SUCCESS") {
        this.deviceList = res.data;
        this.chanxian = this.deviceList[0].name;
        this.groupId = this.deviceList[0].id;
        this.getLineNumber();
      }
    },
    changeSelect() {
      this.issueDate = "";
      this.checked = false;
      if (this.selectLong == "日") {
        // this.option = this.optionDay;
        // chart1.setOption(this.option);
        this.checked = false;
        // this.getLineNumber();
      } else if (this.selectLong == "月") {
        // this.option = this.optionMonth;
        // chart1.setOption(this.option);
        // this.getLineNumber();
      } else if (this.selectLong == "年") {
        // this.option = this.optionYear;
        // chart1.setOption(this.option);
        // this.getLineNumber();
      }
    },
    initChart() {
      chart1 = echarts.init(document.getElementsByClassName("chart1")[0]);
      chart1.setOption(this.optionDay);
      chart2 = echarts.init(document.getElementsByClassName("chart2")[0]);
      chart2.setOption(this.option1);
    },
    handleResize() {
      if (chart1) {
        chart1.resize();
      }
      if (chart2) {
        chart2.resize();
      }
    },
  },
  created() {
    this.issueDate = getToday();
    this.handleResize();
    this.getGroup();

    // this.getRenderList();
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      window.addEventListener("resize", this.handleResize);
    });
  },
  beforeUnmount() {
    // Vue 3（Vue 2 用 beforeDestroy）
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>
<style lang="less" scoped>
.useElect {
  margin-left: 2vw;
  margin-top: 3vh;
  height: 3vh;
}
.chart1Contain {
  width: 100%;
  margin-top: 1vh;
}

.el-table .el-table__body tr {
  background-color: transparent !important; /* 设置为透明背景 */
}

.chart1 {
  width: 80%;
  height: 33vh;
  // background: red;
}
.chart2 {
  width: 20%;
  // max-width: 300px;
  height: 32vh;
  // max-height: 300px;
}
.deleteWeek {
  font-size: 1vw;
  color: black;
  margin-left: 0.3vw;
}

.el-select {
  color: #5f5f5f !important;
}
:deep(.el-select__icon) {
  color: #5190cd !important;
}
:deep(.el-select__wrapper) {
  background: #efefef !important;
  font-size: 0.7vw;
}
:deep(.el-select .el-select__wrapper) {
  height: 3vh !important;
  font-size: 0.7vw;
}
// 文字颜色
:deep(.el-select__selected-item) {
  display: flex;
  align-items: center;
  height: 3vh !important;
  color: #5f5f5f;
}
:deep(.el-input) {
  background: #efefef;
  height: 3.5vh !important;
}
:deep(.el-input__inner) {
  font-size: 0.7vw;
}

// 设置下拉框的样式
.el-select-dropdown__item {
  height: 5vh !important; /* 修改高度 */
  line-height: 5vh !important; /* 修改行高，保持与高度一致 */
  font-size: 0.7vw !important; /* 修改字体大小 */
}
.tableContainner {
  width: 86vw;

  margin: 3.5vh auto;
}
.el-table {
  font-size: 0.8vw;
}
:deep(.el-table__cell) {
  padding: 0 !important;
}
:deep(.el-table__cell .cell) {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3.5vh;
  padding: 0 !important;
  height: 5vh !important;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
</style>
